<template>
  <base-paenl>
    <span slot="header">房管员列表</span>
    <div slot="main" class="slot-main">
      <div class="content-warpper">
        <AreaSelect />
        <el-scrollbar class="list-warpper" style="height: 780px">
          <div
            :class="
              active && item.newId == active.newId
                ? 'list-item list-item-active'
                : 'list-item'
            "
            v-for="(item, index) in arrData"
            :key="index"
            @click="handleClick(item)"
          >
            <div>
              <el-image
                style="width: 52px; height: 52px; border-radius: 50%; border: solid 2px #1658a0;"
                :src="item.toux ? userImgUrl + item.toux : ''"
              >
                <div slot="error"></div>
              </el-image>
            </div>
            <div class="info">
              <div class="name">{{ item.gridYuanName }}</div>
              <div class="li">
                <div class="txt">
                  <img
                    :src="
                      active && item.sfid == active.sfid
                        ? require('../../assets/images/panels/weizhidianjihou.png')
                        : require('../../assets/images/panels/weizhidianjiqian.png')
                    "
                    width="14px"
                    height="16px"
                    style="margin: 2px 10px 0 0"
                  />{{ item.gridName }}
                </div>
                <div class="txt">
                  <img
                    :src="
                      active && item.sfid == active.sfid
                        ? require('../../assets/images/panels/dianhuadianji-hou.png')
                        : require('../../assets/images/panels/dianhuadianji-qian.png')
                    "
                    width="14px"
                    height="16px"
                    style="margin: 2px 10px 0 0"
                  />{{ item.contact }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="page-warpper">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="8"
            layout="total, prev, pager, next"
            :total="data.length"
            :pager-count="5"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </base-paenl>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import exportVue from "@/assets/modules/exportVue";
import AreaSelect from "./CAreaSelect.vue";
import {
  getGridmanList,
  getGridmanDetail,
  getTaskHandling,
  getTaskHouseRent,
  getGridmanTenancyContract
} from "@/assets/modules/service";

@Component({
  name: "PersonnelControl",
  components: { BasePaenl, AreaSelect }
})
export default class extends Vue {
  get floorGridmanSfid() {
    return this.$store.getters["panelData/floorGridmanSfid"];
  }
  page = 1;
  arrData: any[] = [];
  listData: any[] = [];
  data: any[] = [];

  active: any = null;
  count = 0;
  userImgUrl = "";
  @Watch("data")
  handleDataChange() {
    const items =(this.data && this.data.length) > 0 ? this.data.filter(el => {
      return this.active && el.sfid === this.active.sfid;
    }): [];
    if (items.length === 0) {
      this.$store.commit("panel/setRightPanel", "");
      this.$store.commit("panel/setBottomPanel", "");
    }
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData() {
    this.getGridmanList();
  }
  async mounted() {
    const win: any = window;
    this.userImgUrl = win.user.DOWNLOAD_BASE_PATH;
    const _this = this;
    exportVue.$on("clickGrid", (item: any) => {
      _this.handleClick(item);
    });
  }
  getGridmanList() {
    const data: any = {
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      sqCodeList: this.areaData.sqCodeList,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      page: 1,
      pageSize: 1000
    };
    getGridmanList(data).then((res: any) => {
      if (res?.data) {
        this.listData = res.data.datal ? res.data.datal : [];
        this.data = this.listData;
        if(this.listData && this.listData.length > 0){
           this.listData.forEach((i: any, index: any) => {
              i.newId = index;
           });
           this.arrData = this.listData.slice(0, 8);
        }else {
           this.arrData = []
        }
        if (this.floorGridmanSfid) {
          for (let i = 0; i < this.listData.length; i++) {
            const item = this.listData[i];
            if (item.sfid == this.floorGridmanSfid) {
              this.handleClick(item);
            }
          }
          this.$store.commit("panelData/setFloorGridmanSfid", "");
        }
      }
    });
  }
  handleCurrentChange(e: any) {
    this.page = e;
    this.arrData = this.data.slice((e - 1) * 8, e * 8);
  }

  handleClick(data: any) {
    this.$store.commit("panelData/setGridmanSfid", data.sfid);
    let item = JSON.parse(JSON.stringify(data));
    const arr: Promise<any>[] = [];
    const sfidData = {
      sfid: item.sfid
    };
    arr.push(this.getGridmanDetail(sfidData));
    arr.push(this.getTaskHandling(sfidData));
    arr.push(this.getTaskHouseRent(sfidData));
    arr.push(this.getGridmanTenancyContract(sfidData));
    Promise.all(arr).then(res => {
      if (res[0]?.data) {
        item = { ...item, ...res[0].data };
      }
      const track: any = [];
      if (item.list && item.list.length > 0) {
        for (let i = 0; i < item.list.length; i++) {
          const point = [item.list[i].x, item.list[i].y];
          track.push(point);
        }
      }
      item.track = track;
      item.taskInfo = (window as any).dataConfig.gridmanTaskInfo;
      item.htbaCount = 0;
      item.fyfbshCount = 0;
      item.taskInfozl = (window as any).dataConfig.gridmanTaskInfozl;
      if (res[1]?.data) {
        item.htbaCount = res[1].data.htbazs;
        item.fyfbshCount = res[1].data.fyfbshs;
        item.taskInfo.zlxmxc.bnlj = res[1].data.zlxm.xm_bnlj;
        item.taskInfo.zlxmxc.jdlj = res[1].data.zlxm.xm_jdlj;
        item.taskInfo.zlxmxc.bylj = res[1].data.zlxm.xm_bylj;
        item.taskInfo.zlxmxc.jr = res[1].data.zlxm.xm_jrlj;
        item.taskInfo.ybxmxc.bnlj = res[1].data.ybxm.xm_bnlj;
        item.taskInfo.ybxmxc.jdlj = res[1].data.ybxm.xm_jdlj;
        item.taskInfo.ybxmxc.bylj = res[1].data.ybxm.xm_bylj;
        item.taskInfo.ybxmxc.jr = res[1].data.ybxm.xm_jrlj;
        item.taskInfo.bzfxmxc.bnlj = res[1].data.bzfxm.xm_bnlj;
        item.taskInfo.bzfxmxc.jdlj = res[1].data.bzfxm.xm_jdlj;
        item.taskInfo.bzfxmxc.bylj = res[1].data.bzfxm.xm_bylj;
        item.taskInfo.bzfxmxc.jr = res[1].data.bzfxm.xm_jrlj;
        item.taskInfo.zcxfcxmxc.bnlj = res[1].data.zcxfcxm
          ? res[1].data.zcxfcxm.xm_bnlj
          : 0;
        item.taskInfo.zcxfcxmxc.jdlj = res[1].data.zcxfcxm
          ? res[1].data.zcxfcxm.xm_jdlj
          : 0;
        item.taskInfo.zcxfcxmxc.bylj = res[1].data.zcxfcxm
          ? res[1].data.zcxfcxm.xm_bylj
          : 0;
        item.taskInfo.zcxfcxmxc.jr = res[1].data.zcxfcxm
          ? res[1].data.zcxfcxmxc.xm_jrlj
          : 0;
        item.taskInfo.cbxmxc.bnlj = res[1].data.cbxm.xm_bnlj;
        item.taskInfo.cbxmxc.jdlj = res[1].data.cbxm.xm_jdlj;
        item.taskInfo.cbxmxc.bylj = res[1].data.cbxm.xm_bylj;
        item.taskInfo.cbxmxc.jr = res[1].data.cbxm.xm_jrlj;
        item.taskInfozl.zlfyhc.bnlj = res[1].data.zlfy.fy_bnlj;
        item.taskInfozl.zlfyhc.jdlj = res[1].data.zlfy.fy_jdlj;
        item.taskInfozl.zlfyhc.bylj = res[1].data.zlfy.fy_bylj;
        item.taskInfozl.zlfyhc.jr = res[1].data.zlfy.fy_jrlj;
        item.taskInfozl.zlqyxc.bnlj = res[1].data.zlqy.qy_bnlj;
        item.taskInfozl.zlqyxc.jdlj = res[1].data.zlqy.qy_jdlj;
        item.taskInfozl.zlqyxc.bylj = res[1].data.zlqy.qy_bylj;
        item.taskInfozl.zlqyxc.jr = res[1].data.zlqy.qy_jrlj;
        item.taskInfozl.jjjgxc.bnlj = res[1].data.jjjg.jg_bnlj;
        item.taskInfozl.jjjgxc.jdlj = res[1].data.jjjg.jg_jdlj;
        item.taskInfozl.jjjgxc.bylj = res[1].data.jjjg.jg_bylj;
        item.taskInfozl.jjjgxc.jr = res[1].data.jjjg.jg_jrlj;
      }
      item.taskInfofw = (window as any).dataConfig.gridmanTaskInfofw;
      item.taskInfolsrjhcl = 0;
      if (res[2]?.data) {
        item.taskInfofw.qyhcfwzs.bnlj = res[2].data.fwzsbnlj;
        item.taskInfofw.qyhcfwzs.jdlj = res[2].data.fwzsjdlj;
        item.taskInfofw.qyhcfwzs.bylj = res[2].data.fwzsbylj;
        item.taskInfofw.qyhcfwzs.jr = res[2].data.fwzsjr;
        item.taskInfofw.qyhcxqs.bnlj = res[2].data.xqsbnlj;
        item.taskInfofw.qyhcxqs.jdlj = res[2].data.xqsjdlj;
        item.taskInfofw.qyhcxqs.bylj = res[2].data.xqsbylj;
        item.taskInfofw.qyhcxqs.jr = res[2].data.xqsjr;
        item.taskInfofw.xqsjws.bnlj = res[2].data.xqsjfwsbnlj;
        item.taskInfofw.xqsjws.jdlj = res[2].data.xqsjfwsjdlj;
        item.taskInfofw.xqsjws.bylj = res[2].data.xqsjfwsbylj;
        item.taskInfofw.xqsjws.jr = res[2].data.xqsjfwsjr;
        item.taskInfolsrjhcl = res[2].data.fwzslspj;
      }
      item.tenancyContract = (window as any).dataConfig.gridmanTenancyContract;
      if (res[3]?.data) {
        item.tenancyContract.lsljs.value = res[3].data.lslj;
        item.tenancyContract.xyyxhts.value = res[3].data.xyyxhts;
        item.tenancyContract.bjl.children.bnd.value = res[3].data.bndbjl;
        item.tenancyContract.bjl.children.bjd.value = res[3].data.bjdbjl;
        item.tenancyContract.bjl.children.byd.value = res[3].data.bydbjl;
        item.tenancyContract.xzl.children.bnd.value = res[3].data.bndxzl;
        item.tenancyContract.xzl.children.bjd.value = res[3].data.bjdxzl;
        item.tenancyContract.xzl.children.byd.value = res[3].data.bydxzl;
      }
      this.$store.commit("panel/setRightPanelShow", true);
      this.$store.commit("panel/setBottomPanelShow", true);
      this.$store.commit("panel/setRightPanel", "gridman");
      this.$store.commit("panel/setBottomPanel", "gridman");
      this.$nextTick(() => {
        exportVue.$emit("initGrid", item);
        exportVue.$emit("track-active", false);
        this.$store.commit("panel/setDialogShow", false);
        this.active = item;
      });
    });
  }
  getGridmanDetail(sfidData: any) {
    const promise = new Promise(resolve => {
      getGridmanDetail(sfidData)
        .then(res => {
          resolve(res);
        })
        .catch(() => {
          resolve(null);
        });
    });
    return promise;
  }
  getTaskHandling(sfidData: any) {
    const promise = new Promise(resolve => {
      getTaskHandling(sfidData)
        .then(res => {
          resolve(res);
        })
        .catch(() => {
          resolve(null);
        });
    });
    return promise;
  }
  getTaskHouseRent(sfidData: any) {
    const promise = new Promise(resolve => {
      getTaskHouseRent(sfidData)
        .then(res => {
          resolve(res);
        })
        .catch(() => {
          resolve(null);
        });
    });
    return promise;
  }
  getGridmanTenancyContract(sfidData: any) {
    const promise = new Promise(resolve => {
      getGridmanTenancyContract(sfidData)
        .then(res => {
          resolve(res);
        })
        .catch(() => {
          resolve(null);
        });
    });
    return promise;
  }
}
</script>

<style lang="scss">
.content-warpper {
  .area-select {
    width: 404px;
  }
  height: 918px;
  width: 404px;
  .list-warpper {
    .list-item {
      margin-bottom: 10px;
      padding: 20px;
      width: 404px;
      height: 88px;
      background: url("../../assets/images/panels/fanguanyuanliebiaobiandianji-qian.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      .info {
        width: 310px;
        margin-left: 10px;
      }
      .name {
        height: 28px;
        font-family: AlibabaPuHuiTi_2_65_Medium;
        font-size: 16px;
        line-height: 22px;
        color: #ffffff;
      }
      .li {
        display: flex;
        .txt {
          flex: 1;
          display: flex;
          font-family: AlibabaPuHuiTi_2_55_Regular;
          font-size: 14px;
          line-height: 22px;
          color: #ffffff;
        }
      }
    }
    .list-item-active {
      background: url("../../assets/images/panels/fanguanyuanliebiaobiandianji-hou.png");
      .name {
        color: #08ebff;
      }
      .li .txt {
        color: #08ebff;
      }
    }
  }
  .page-warpper {
    position: absolute;
    bottom: 20px;
    width: 404px;
    height: 72px;
    background-image: linear-gradient(0deg, #001022 0%, #011e3f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    .el-pagination__total {
      font-family: AlibabaPuHuiTi_2_65_Medium;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
    }
    .el-pagination.is-background .btn-next.disabled,
    .el-pagination.is-background .btn-next:disabled,
    .el-pagination.is-background .btn-prev.disabled,
    .el-pagination.is-background .btn-prev:disabled,
    .el-pagination.is-background .el-pager li.disabled {
      color: #ffffff;
    }
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: #001022;
      border: solid 1px #ffffff;
      color: #ffffff;
      border-radius: 4px;
      width: 24px;
      height: 24px;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 14px;
      color: #ffffff;
      line-height: 24px;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      width: 24px;
      height: 24px;
      background-color: #3998ff;
      border-radius: 4px;
      border: solid 1px #3998ff;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      color: #0a1231;
    }
  }
  .list-warpper {
    .el-image__error {
      background: transparent;
    }
  }
}
</style>
